<template>
  <div class="cropper-wrap">
    <img :src="image" alt="" id='cropper'>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
export default {
  data() {
    return {
      preview: '',
      cropper: null
    }
  },
  props: {
    image: {
      type: String,
      default: ''
    }
  },
  methods: {
    getBlob() {
      return new Promise((resolve, reject) => {
        const canvas = this.cropper.getCroppedCanvas({
          width: 750
        })
        canvas.toBlob(function(blob) {
          resolve(blob)
        })
      })
    }
  },
  updated() {
    const image = document.getElementById('cropper')
    this.cropper = new Cropper(image, {
      aspectRatio: 16 / 9,
      viewMode: 1,
      dragMode: 'none'
    })
  },
  mounted() {
    const image = document.getElementById('cropper')
    this.cropper = new Cropper(image, {
      aspectRatio: 16 / 9,
      viewMode: 1,
      dragMode: 'none'
    })
  }
}
</script>

<style lang="scss">
.cropper-wrap {
  width: 500px;
  height: 300px;
  margin: 0 auto;
}
</style>
